<template>
  <el-dialog
    class="modify-class"
    width="500px"
    title="新增质量问题"
    visible
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
  <el-form class="modify-form mt20" :model="formData" label-width="110px">
    <el-form-item label="系统/分系统">
      <el-cascader ref="cascaderRef" class="modify-select" filterable :options="sysList" :props="cascaderProps"
        v-model="formData.sysCode" style="width: 100%;"  @change="sysChangeHandle"/>
    </el-form-item>
    <el-form-item label="单机" prop="deviceCode">
      <el-select v-model="formData.deviceCode" class="modify-select" popper-class="table-select-poppper" filterable style="width: 100%;" @change="deviceChangeHandle" >
        <el-option v-for="selectItem in deviceList" :key="selectItem.deviceCode" :value="selectItem.deviceCode" :label="selectItem.deviceName"/>
      </el-select>
    </el-form-item>
    <el-form-item label="问题类别" prop="qualityType">
      <el-select class="modify-select" v-model="formData.qualityType" popper-class="table-select-poppper" style="width: 100%;">
        <el-option v-for="selectItem in issueTypeList" :key="selectItem.value" :value="selectItem.value" :label="selectItem.label"/>
      </el-select>
    </el-form-item>
    <el-form-item label="问题来源" prop="qualitySource">
      <el-select class="modify-select" v-model="formData.qualitySource" popper-class="table-select-poppper" style="width: 100%;">
        <el-option v-for="selectItem in issueSourceList" :key="selectItem.value" :value="selectItem.value" :label="selectItem.label"/>
      </el-select>
    </el-form-item>
  </el-form>
  <div class="dialog-footer" slot="footer">
    <el-button class="btn-comfirm" type="primary" @click="saveHandle">确认</el-button>
    <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
  </div>
  </el-dialog>
</template>

<script>
import {issueTypeList, issueSourceList} from "@/utils/const.js"
import overviewApis from '@/apis/overview/index.js'
import qualityApi from '@/apis/overview/quality.js'

export default {
  props: {
    modelId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    this.issueTypeList = issueTypeList
    this.issueSourceList = issueSourceList

    return {
      formData: {
        modelId: this.modelId,
        sysCode: '',
        sysName: '',
        sub: 0,
        deviceCode: '',
        deviceName: '',
        qualityDescribe: '',
        qualityProgres: 0,
        qualityProgressPlan: '',
        qualityProgressNum: 0,
        calculateProgress: 0,
        calculateProgressPlan: '',
        calculateProgressNum: 0,
        qualityType: '',
        qualitySource: '',
        focus: 0
      },
      sysList: [],
      deviceList: [],
      cascaderProps: {
        children: 'subList',
        value: 'sysCode',
        label: 'sysName',
        checkStrictly: true
      }
    }
  },
  methods: {
    close(refresh) {
      this.$emit("close", refresh);
    },
    beforeClose() {
      this.close(false);
    },
    saveHandle() {
      let formData = {...this.formData}
      formData.sysCode = formData.sysCode[0]
      qualityApi.qualityInsert({...formData}).then(() => {
        this.$message.success('保存成功')
        this.close(true)
      })
    },
    cancelHandle() {
      this.close(false)
    },
    sysChangeHandle() {
      let {data, label} = this.$refs.cascaderRef.getCheckedNodes()[0]
      this.formData.sysName = label
      this.formData.sub = data.sub ? 1 : 0
      this.formData.deviceCode = ''
      this.formData.deviceName = ''
      this.requestDevice({
        [data.sub ? 'sysSubCode' : 'sysCode']: data.sysCode
      })
    },
    deviceChangeHandle(deviceCode) {
      let item = this.deviceList.find(item => item.deviceCode == deviceCode)
      this.formData.deviceName = item.deviceName
    },
    requestSystem() {
      overviewApis.sysList({modelId: this.modelId}).then(({data}) => {
        this.sysList = data
      })
    },
    requestDevice(params = {}) {
      this.deviceList = []
      overviewApis.deviceList({modelId: this.modelId, ...params}).then(({data}) => {
        this.deviceList = data
      })
    }
  },
  mounted(){
    this.requestSystem()
  }
}
</script>

<style>

</style>